import React from 'react';
import { useRoutes, Link } from 'react-router-dom'
import { LaptopOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import type { MenuProps } from 'antd';
const { Header, Sider, Content } = Layout;
import router from './router'

type MenuItem = Required<MenuProps>['items'][number];

const headerStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: '#7dbcea',
};
const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
};

const siderStyle: React.CSSProperties = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#3ba0e9',
};
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}
const items2: MenuItem[] = [
  getItem('企业信息', '1', <LaptopOutlined />),
  getItem('个人信息', '2', <UserOutlined />)
];

function App() {
  const outlet = useRoutes(router)
  return (
    <>
      <Layout style={{ minHeight: '100vh' }}>
        <Header style={headerStyle}>
          <Link to='/'>home</Link>
          <Link to='/about'>about</Link>
        </Header>
        <Layout hasSider>
          <Sider style={siderStyle}>
            <Menu
              theme="light"
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%' }}
              items={items2}
            />
          </Sider>
          <Content style={contentStyle}>
            {outlet}
          </Content>
        </Layout>
      </Layout>
    </>
  )
}

export default App
